{% extends '0.框架.html' %}
{% block head %}
    <link rel="stylesheet" href="{% static 'highlight/styles/github-dark-dimmed.css' %}">
    <script src="{%  static 'highlight/highlight.min.js' %}"></script>
{% endblock %}
{% block title %}
    详情
{% endblock %}
{% block mate %}
<main class="container bg-white p-3 rounded">
    <h1>{{ blog.title }}</h1>
    <hr>
  <div class="card-footer text-muted d-flex justify-content-between">
    <div >
        <img src="{% static 'img/moban.png' %}" class="rounded-circle" width="40px" height="40px">
        {{ blog.author.username }}
    </div>
      <div>
          <p>发布时间:{{ blog.pub_time|date:'Y年m月d日 h时i分' }}</p>
      </div>
  </div>
<hr>
<div class="py-2">
    {{ blog.content|safe }}
</div>
<hr>
    <div>
        <h4>评论({{ blog.comments.all|length }}):</h4>
    <form action="{% url 'blog:pub_comment' %}" method="POST" >
        {% csrf_token %}
        <input type="hidden" name="blog_id" value="{{ blog.id }}">
        <div class="mt-2"  >
            <input style="height: 50px" type="text"  class="form-control" placeholder="请输入评论" name="content">
        </div>
        <div class="text-end mt-2" >
            <button type="submit" class="btn btn-primary mt-2">评论</button>
        </div>

    </form>

    </div>
<div class="mt-4" >
    <ul class="list-group list-group-flush">
        {% for comment in blog.comments.all%}
          <div class="card-footer text-muted d-flex justify-content-between text-body-secondary" >
    <div >
        <img src="{% static 'img/moban.png' %}" class="rounded-circle" width="30px" height="30px">
{{ comment.author.username }}
    </div>
      <div class="create-time " style="line-height: 30px">
          <p >{{ comment.pub_time|date:'Y年m月d日 h时i分'  }}</p>
      </div>
  </div>
  <li class="list-group-item">{{ comment.content }}</li>>
        {% endfor %}
</ul>
</div>
</main>
    <script>
    hljs.highlightAll()
    </script>
{% endblock %}